<!--Mark:
      - 设计一个权限按钮组件，目前只有两个权限，A、B后面可能会再加
      - 当前是A权限的时候 按钮消失
      - 当前是B权限的时候按钮显示，按钮名为“B权限按钮”,正常显示
      - 提醒
        - 相关权限在组件里如何获取
        - 获取到权限后如何编写逻辑
        - 如何使用这个组件
-->

<template>

  <div class="container">
    <div>用户1 的权限 ['create', 'delete', 'update', 'query']</div>
    <AuthBtn btnName="新增" authCode="create" :currentUserAuthList='authList'/>
    <AuthBtn btnName="删除" authCode="delete" :currentUserAuthList='authList'/>
    <AuthBtn btnName="查看" authCode="query" :currentUserAuthList='authList'/>
  </div>
  <br>
  <div class="container">
    <div>用户2 的权限 ['query']</div>
    <AuthBtn btnName="新增" authCode="create" :currentUserAuthList='authList2'/>
    <AuthBtn btnName="删除" authCode="delete" :currentUserAuthList='authList2'/>
    <AuthBtn btnName="查看" authCode="query" :currentUserAuthList='authList2'/>
  </div>
  <br/>


</template>

<script>
import AuthBtn from "@/components/AuthBtn.vue";
export default {
  inject: ['currentUser1', 'currentUser2','roleList'],
  components: {AuthBtn},
  data() {
    return {
      authList:['create', 'delete', 'update', 'query'],
      authList2:['query'],
    }
  }
}
</script>

<style scoped>

.container{
  margin: 10px;
}

</style>
